window.addEventListener('load',function(){
    var circle=document.querySelector('.circle');
    var focus=document.querySelector('.focus');
    var ul=focus.querySelector('ul');
    //添加小圆圈
    // for(var i=0;i<ul.children.length;i++){
    //     var li=document.createElement('li');
    //     circle.appendChild(li);
    // }
    // circle.children[0].className='current';
    // var first=ul.children[0].cloneNode(true);
    // ul.appendChild(first);
    // // console.log(ul.children.length - 1);
    // var last=ul.children[ul.children.length-2].cloneNode(true);
    // ul.insertBefore(last,ul.children[0]);
    var index=0
    var timer=setInterval(() => {
        // if(index<ul.children.length-1){
            
        // }
        index++;
        var translatex = -index * ul.offsetWidth / 5;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        
    }, 2000);

    ul.addEventListener('transitionend', function () {
        //无缝滚动
        if(index>=3){
            index=0;
            //去掉过渡
            ul.style.transition="none";
            //立马将图片位置复原到index=0的位置。
            var translatex=-index*focus.offsetWidth;
            ul.style.transform = 'translatex(' + translatex+'px)';
        } else if (index<0){
            index=2;
            ul.style.transition="none";
            var translatex=-index*focus.offsetWidth;
            ul.style.transform = 'translatex(' + translatex + 'px)';
        }
        //小圆点跟随变化效果
        circle.querySelector('li.current').classList.remove('current');
        circle.children[index].classList.add('current');
    })

    //手指滑动轮播图
    //获取手指初始坐标
    var startx=0;
    var movex=0;
    //有了移动距离才执行计算，这里加一个标志位，如果没有移动就不计算了
    var flag=false;
    ul.addEventListener('touchstart',function(e){
        startx=e.targetTouches[0].pageX;
        clearInterval(timer);
        timer=null;
    })
    ul.addEventListener('touchmove', function (e) {
        flag=true;
        //计算移动距离
        movex = e.targetTouches[0].pageX-startx;
        //移动盒子：盒子原来位置+手指移动距离
        var translatex=-index*focus.offsetWidth+movex;
        ul.style.transform = 'translate(' + translatex+'px)';

        //需要阻止滚动屏幕的默认行为
        e.preventDefault();
    })
    ul.addEventListener('touchend', function () {
        if(flag==true){
            if (Math.abs(movex) > 50) {
                //右滑动播放上一张 movex是正值
                if (movex > 0) {
                    index--;
                }
                //左滑动播放下一张 movex是负值
                if (movex < 0) {
                    index++;
                }
                var translatex = -index * focus.offsetWidth;
                ul.style.transition = "all .3s";
                ul.style.transform = "translateX(" + translatex + "px)";
            } else {
                var translatex = -index * focus.offsetWidth;
                ul.style.transition = "all .1s";
                ul.style.transform = "translateX(" + translatex + "px)";
            }
        }
        
        //开之前都要清除定时器
        clearInterval(timer);
        timer = setInterval(() => {
            // if(index<ul.children.length-1){

            // }
            index++;
            var translatex = -index * ul.offsetWidth / 5;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';

        }, 2000);
    })
})